<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024年12月10日, 0010
  Time: 09:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <!-- 1.引入css样式文件 -->
    <!-- 1-1.引入 Bootstrap Core CSS -->
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css"
          rel="stylesheet" />
    <!-- 2.引入js文件 -->
    <!-- 2-1.引入 jQuery -->
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <!-- 2-1.引入Bootstrap Core JavaScript -->
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 3.在页面的上方导入菜单导航条navigation.jsp -->
<jsp:include page="user_navigation.jsp" />
<!-- 4.用于查询用户的from表单 start-->
<div class="panel panel-default">
    <div class="panel-body">
        <form class="form-inline" method="get"
              action="${pageContext.request.contextPath}/jiansheng.action">
            <div class="form-group">
                <label>ID</label> <input type="text" class="form-control"
                                           value="" name="id" />
            </div>
            <div class="form-group">
                <label>教练姓名</label> <input type="text" class="form-control"
                                          value="" name="username" />
            </div>
            <div class="form-group">
                <label>项目类型</label>
                <select class="form-control" name="projecot">
                    <option value="" selected="selected">--选择--</option>
                    <option value="有氧运动">有氧运动</option>
                    <option value="无氧运动">无氧运动</option>
                    <option value="强度">强度</option>
                    <option value="耐力">耐力</option>
                    <option value="高强度间歇训练HIIT">高强度间歇训练HIIT</option>
                    <option value="平衡稳定">平衡稳定</option>
                    <option value="灵活性">灵活性</option>
                </select>

            </div>

            <button type="submit" class="btn btn-primary">查询</button>
        </form>
    </div>
</div>
<!-- 用于查询用户的from表单 end-->
<!-- 6.显示用户列表 start-->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">预约教练列表</div>
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>用户ID</th>
                    <th>教练姓名</th>
                    <th>教练性别</th>
                    <th>联系电话</th>
                    <th>教练类型</th>
                    <th>项目类型</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${reservationList}" var="row">
                    <tr>
                        <td>${row.id}</td>
                        <td>${row.username}</td>
                        <td>${row.gender}</td>
                        <td>${row.telephone}</td>
                        <td>${row.styll}</td>
                        <td>${row.projecot}</td>
                        <td>
                            <a href="#" class="btn btn-primary btn-xs"
                               data-toggle="modal" data-target="#editUserDialog"
                               onclick="editUser(${row.id})">预约</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <ul class="pagination">
                <c:if test="${pageInfo.pages > 1}">
                    <c:if test="${pageInfo.pageNum > 1}">
                        <li><a href="listReservation.action?pageNum=${pageInfo.pageNum - 1}&pageSize=${pageInfo.pageSize}">上一页</a></li>
                    </c:if>

                    <c:forEach var="i" begin="1" end="${pageInfo.pages}">
                        <li class="${pageInfo.pageNum == i ? 'active' : ''}">
                            <a href="listReservation.action?pageNum=${i}&pageSize=${pageInfo.pageSize}">${i}</a>
                        </li>
                    </c:forEach>

                    <c:if test="${pageInfo.pageNum < pageInfo.pages}">
                        <li><a href="listReservation.action?pageNum=${pageInfo.pageNum + 1}&pageSize=${pageInfo.pageSize}">下一页</a></li>
                    </c:if>
                </c:if>
            </ul>
        </div>
    </div>
</div>
<!-- 显示用户列表 end-->
<!-- 7.在页面的下方导入foot.jsp -->
<jsp:include page="../foot.jsp" />
<!-- 9.定义用于“修改用户”的模态框。  start -->
<div class="modal fade" id="editUserDialog" tabindex="-1" role="dialog"
     aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="editModalLabel">
                    <!-- 在"modal-title"下设置模态框的标题 -->
                    预约教练信息
                </h4>
            </div>
            <div class="modal-body">
                <!-- 在"modal-body"下设置模态框的内容，一般在这里添加form表单 -->
                <div class="panel-body">
                    <form>
                        <input type="hidden" id="edit_id" name="id" />
                        <div class="input-group ">
                            <span class="input-group-addon">选择时间段</span>
                            <input type="datetime-local" class="form-control" id="appointmentTime">
                        </div>
                        <br />
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <!-- 在"modal-footer"下设置模态框的提交按钮 -->
                <button type="button" class="btn btn-primary"
                        onclick="Reservation()">预约</button>
            </div>
        </div>
    </div>
</div>
<!-- 定义用于“修改用户”的模态框。  end -->
<!-- 10.编写jQuery代码，负责客户端与服务器端的数据交互 -->
<script type="text/javascript">
    //通过用户id，向服务器发送ajax请求，从服务器端的数据库中，查询出待修改的用户信息。
    function editUser(id) {
        // 1. 调用$.ajax()方法，向服务器发送异步http请求
        $.ajax({
            //1) 指定待发送http请求的URL地址。
            url: "${pageContext.request.contextPath}/findUserById.action",
            //2) 设置http请求的类型，为GET。
            type: "get",
            //3) 将cache设置为false将不会从浏览器缓存中加载请求信息。
            cache:false,
            //4) 设置要发送到服务器的数据。本例中是一个简单格式的JSON数据。
            data: {"id":id},
            //5) 发送http请求，服务器成功响应后，在客户端将要调用的回调方法。
            // 本例中，服务器将返回一个描述用户信息的JSON字符串，在这里，javascript会
            // 将(从服务器接收到的)JSON字符串，自动转换成javascript中的user对象。
            success: function(data) {
                //将user对象的id属性值，设置到(id名为edit_id的)输入控件上
                $("#edit_id").val(data.id);
                //将user对象的username属性值，设置到(id名为edit_username的)输入控件上
                $("#edit_username").val(data.username);
                $("#edit_password").val(data.password);
                if(data.gender=='男'){
                    $("#edit_male").prop("checked",true);
                }
                else{
                    $("#edit_female").prop("checked",true);
                }
                $("#edit_email").val(data.email);
                $("#edit_telephone").val(data.telephone);
                $("#edit_introduce").val(data.introduce);
                $("#edit_role").val(data.role);
            }
        });
    }
//执行修改用户操作
        function Reservation() {
            // 获取用户选择的数据
            const time = $('#appointmentTime').val();
            if (time) {
                alert(`预约成功!`);
                $('#editUserDialog').modal('hide');
            }
            $.ajax({
                //1) 指定待发送http请求的URL地址。
                url: "${pageContext.request.contextPath}/reservation.action",
                //2) 设置http请求的类型，为POST。
                type: "post",
                //3) 指定要发送到服务器的数据的数据类型，支持复杂的包含中文的JSON数据。
                // contentType: "application/json;charset=UTF-8",
                data: formData,
                contentType: false,  // 不设置 Content-Type，浏览器会自动设置为 multipart/form-data
                processData: false,  // 不处理数据
                //5) 发送http请求，服务器成功响应后，在客户端将要调用的回调方法。
                success: function(data) {
                    //本例中，服务器端返回的不是JSON数据，就是一个普通数据。
                    if(data =="SUCCESS"){
                        alert("成功");
                        window.location.reload();//重新加载页面
                    }else{
                        alert(data);
                        window.location.reload();//重新加载页面
                    }
                }
            });
        }
</script>
    </body>
</html>